@charset "UTF-8";
*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}
html,body{height:100vh}
body{color:#333;background-color: #fafafa;}
.game-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.game-box section {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.game-box section:before,
.game-box section:after  {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,.6);
}
.game-box section:before {
  top: 0;
  height: 1.3rem;
}
.game-box section:after {
  bottom: 0;
  height: .8rem;
}
/*  */
.start-btn { 
  position: absolute;
  z-index: 1;
  right: .1rem; 
  top: 0; 
  bottom: 0; 
  margin: auto; 
  width: 1.24rem; 
  height: 1.24rem; 
  line-height: 1.24rem; 
  text-align: center; 
  border-radius: 50%; 
  font-size: .5rem; 
  color: #fff; 
  background: #000; 
  text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #FF00DE, 0 0 70px #FF00DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE; }
/*  */
.prize-main{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  height: 100vh;
}
.prize-main ul {
  position: absolute;
  font-size: 0;
  white-space: nowrap;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  z-index: 1;
}
.prize-main ul li {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 1.15rem;
  height: 1.15rem;
  font-size: .28rem;
  text-align: center;
  margin: 0 .2rem;
  user-select: none;
}
.prize-main ul li.opacity {
  opacity: 0;
}
.before-prize {
  bottom: 0;
  left: 0;
}
.before-prize:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.after-prize {
  bottom: 0.6rem;
  right: 0;
}
.prize-img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: url(../img/prize/gift_bg.png) no-repeat;
  background-size: 100% 100%;
}
.prize-img img {
  position: absolute;
  width: 60%;
  height: 60%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 1rem;
}
.after-prize .prize-img {
  width: 60%;
  height: 60%;
}
/*  */
.clip {
  position: absolute;
  width: 1.65rem;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 0 0 0.9rem;
}
.clip .footer {
  width: 100%;
  height: 0.9rem;
  position: absolute;
  bottom: 0;
}
.clip .footer.put .footer-left {
  transform:rotate(26deg);
  -webkit-transform:rotate(26deg);
  transition:all 0.5s linear;
  -webkit-transition:all 0.5s linear;
}
.clip .footer.put .footer-right {
  transform:rotate(-26deg);
  -webkit-transform:rotate(-26deg);
  transition:all 0.5s linear;
  -webkit-transition:all 0.5s linear;
}
.clip .footer.put .footer-center {
  transform:rotateX(-36deg);
  -webkit-transform:rotateX(-36deg);
  transition:all 0.5s linear;
  -webkit-transition:all 0.5s linear;
}
.clip .footer.closed .footer-left {
  transform:rotate(10deg);
  -webkit-transform:rotate(10deg);
  transition:all 0.2s linear;
  -webkit-transition:all 0.2s linear;
}
.clip .footer.closed .footer-right {
  transform:rotate(-10deg);
  -webkit-transform:rotate(-10deg);
  transition:all 0.2s linear;
  -webkit-transition:all 0.2s linear;
}
.clip .footer.move .footer-left {
  animation: runLeft 1s steps(1) infinite;
  -webkit-animation: runLeft 1s steps(1) infinite;
}
.clip .footer.move .footer-right{
  animation: runRight 1s steps(1) infinite;
  -webkit-animation: runRight 1s steps(1) infinite;
}
.clip .footer.move .footer-center{
  animation: runCenter 1s steps(1) infinite;
  -webkit-animation: runCenter 1s steps(1) infinite;
}
@keyframes runLeft{
  0%{transform:rotate(0deg);-webkit-transform:rotate(0deg)}
  40%{transform:rotate(13deg);-webkit-transform:rotate(13deg)}
  80%{transform:rotate(26deg);-webkit-transform:rotate(26deg)}
  100%{transform:rotate(0deg);-webkit-transform:rotate(0deg)}
}
@keyframes runRight{
  0%{transform:rotate(0deg);-webkit-transform:rotate(0deg)}
  40%{transform:rotate(-13deg);-webkit-transform:rotate(-13deg)}
  80%{transform:rotate(-26deg);-webkit-transform:rotate(-26deg)}
  100%{transform:rotate(0deg);-webkit-transform:rotate(0deg)}
}
@keyframes runCenter{
  0%{transform:rotateX(0deg);-webkit-transform:rotateX(0deg)}
  40%{transform:rotateX(-18deg);-webkit-transform:rotateX(-18deg)}
  80%{transform:rotateX(-36deg);-webkit-transform:rotateX(-36deg)}
  100%{transform:rotateX(0deg);-webkit-transform:rotateX(0deg)}
}
.clip .footer:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.7rem;
  margin: auto;
  width: 0.4rem;
  height: 0.4rem;
  background: url(../img/mid_img_o.png) no-repeat center;
  border-radius: 50%;
}
.clip .pole {
  width: .09rem;
  height: .5rem;
  background: url(../img/mid_img_bg.png) center;
  margin: auto;
}
.footer-left, .footer-right {
  width: 0.54rem;
  height: 0.9rem;
  position: absolute;
  transform: rotate(0deg);
  transition: all 0.5s linear;
}
.footer-left {
  background: url(../img/left_img.png) no-repeat center;
  background-size: 100% 100%;
  left: 0.25rem;
  transform-origin: 0.33rem 0;
}
.footer-right {
  background: url(../img/right_img.png) no-repeat center;
  background-size: 100% 100%;
  right: 0.25rem;
  transform-origin: 0.23rem -0.03rem;
}
.footer-center {
  width: 0.17rem;
  height: 0.8rem;
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  background: url(../img/center_img.png) no-repeat;
  background-size: 100% 100%;
}
.prize-result{
  display:none;
  position:absolute;
  left:0;
  right:0;
  bottom:-0.5rem;
  margin:auto;
  width:1.15rem;
  height:1.15rem;
  background:url(../img/prize/gift_bg.png) no-repeat;
  background-size:100% 100%;
  z-index: 2;
}
.prize-result img{
  width:60%;
  height:60%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto
}
.other-btn {
  position: absolute;
  top: .2rem;
  right: .2rem;
  color: #fff;
}